<style lang="less" scoped>
@import "./performance.less";
</style>
<template>
  <div>
      <Row>
          <Col span="24">
              <Card>
                <p slot="title" style="height: 32px">
                        <Button type="primary" @click="alertAdd" icon="plus-round">新增业务员</Button>
                    </p>
                  <div>
                          <Table :columns="columnsList" :data="tableData" border disabled-hover :loading="main"></Table>
                  </div>
                  <div class="margin-top-15" style="text-align: center">
                          <Page :total="tableShow.count" :current="tableShow.page" :page-size="tableShow.size" @on-change="changePage" @on-page-size-change="changeSize" show-elevator show-sizer show-total></Page>
                  </div>
              </Card>
          </Col>
      </Row>
      <Modal v-model="modal.show" :style="{top:'30px'}" width="60%" @on-visible-change="doCancel">
        <div>
          <Table :columns="columns" :data="data" border disabled-hover :loading="inline"></Table>
        </div>
        <div class="margin-top-15" style="text-align: center">
          <Page :total="modal.count" :current="modal.page" :page-size="modal.size" @on-change="changeModalPage" @on-page-size-change="changeModalSize" show-elevator show-sizer show-total></Page>
        </div>
        <div slot="footer"></div>
      </Modal>
      <Modal v-model="salesman.show" :style="{top:'30px'}" @on-ok="submit">
        <Form :model="formItem" :label-width="80">
          <FormItem label="姓名">
            <Input v-model="formItem.name"></Input>
          </FormItem>
          <FormItem label="工号">
            <Input v-model="formItem.num"></Input>
          </FormItem>
          <FormItem label="联系方式">
            <Input v-model="formItem.phone"></Input>
          </FormItem>
          <FormItem label="城市" prop="city">
              <al-cascader v-model="formItem.city" level="2"/>
          </FormItem>
        </Form>

      </Modal>
  </div>
</template>
<script>
// const resourse = "interest";
import axios from "axios";
export default {
  data() {
    return {
      columnsList: [
        {
          title: "序号",
          type: "index",
          align: "center"
        },
        {
          title: "姓名",
          key: "name",
          align: "center"
        },
        {
          title: "所在区域",
          key: "area",
          align: "center"
          // render: (h, params) => {
          //   return h("div", params.row.a);
          // }
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "总成交笔数",
          key: "counts",
          align: "center"
        },
        {
          title: "总成交金额",
          align: "center",
          key: "totals"
        },
        {
          title: "记录",
          align: "center",
          render: (h, params) => {
            return h(
              "Button",
              {
                props: {
                  type: "primary"
                },
                on: {
                  click: () => {
                    this.modal.show = true;
                    this.modal.id = params.row.id;
                    this.getPerformances(params.row.id);
                  }
                }
              },
              "业绩详情"
            );
          }
        },
        {
          title: "操作",
          align: "center",
          render: (h, params) => {
            return h(
              "Poptip",
              {
                props: {
                  confirm: true,
                  title:"您确定要删除该业务员吗? ",
                  transfer: true
                },
                on: {
                  "on-ok": () => {
                    axios.delete("salesman/" + params.row.id).then(response => {
                      let res = response.data;
                      if (res.code === 200) {
                        this.$Message.success(res.msg);
                      } else {
                        if (res.code === 403) {
                          this.$store.commit("logout", this);
                          this.$router.push({
                            name: "login"
                          });
                        } else {
                          this.$Message.error(res.msg);
                        }
                      }
                    });
                    this.getList()
                  }
                }
              },
              [
                h(
                  "Button",
                  {
                    style: {
                      margin: "0 5px"
                    },
                    props: {
                      type: "error",
                      placement: "top"
                    }
                  },
                  "删除"
                )
              ]
            );
          }
        }
      ],
      tableData: [],
      tableShow: {
        count: 0,
        page: 1,
        size: 10
      },
      modal: {
        count: 0,
        page: 1,
        size: 10,
        show: false,
        id: 0
      },
      salesman: {
        show: false
      },
      columns: [
        {
          title: "客户名",
          key: "name",
          align: "center"
        },
        {
          title: "联系电话",
          key: "phone",
          align: "center"
        },
        {
          title: "房源标题",
          key: "house",
          align: "center"
        },
        {
          title: "租赁周期",
          key: "terms",
          align: "center",
          width: 180
        },
        {
          title: "月租金",
          key: "month",
          align: "center"
        },
        {
          title: "总金额",
          key: "totals",
          align: "center"
        },
        {
          title: "成交时间",
          key: "clinch",
          align: "center"
        }
      ],
      data: [],
      main: false,
      inline: false,
      formItem: {
        name: "",
        num: "",
        city: [],
        phone: "",
        sex: 1
      }
    };
  },
  created() {
    // this.init();
    this.getList();
  },
  methods: {
    changePage(page) {
      this.tableShow.page = page;
      this.getList();
    },
    changeSize(size) {
      this.tableShow.size = size;
      this.getList();
    },
    changeModalPage(page) {
      this.modal.page = page;
      this.getPerformances(this.modal.id);
    },
    changeModalSize(size) {
      this.modal.size = size;
      this.getPerformances(this.modal.id);
    },
    getList() {
      this.main = true;
      axios
        .get("user/performance", {
          params: { page: this.tableShow.page, size: this.tableShow.size }
        })
        .then(response => {
          this.main = false;
          let res = response.data;
          if (res.code === 200) {
            this.tableData = res.data.list;
            this.tableShow.count = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    getPerformances(id) {
      this.inline = true;
      axios
        .get("user/" + id + "/performance", {
          params: { page: this.modal.page, size: this.modal.size }
        })
        .then(response => {
          // console.log(response);
          this.inline = false;
          let res = response.data;
          if (res.code === 200) {
            this.data = res.data.list;
            this.modal.count = res.data.count;
          } else {
            if (res.code === 403) {
              this.$store.commit("logout", this);
              this.$router.push({
                name: "login"
              });
            } else {
              this.$Message.error(res.msg);
            }
          }
        });
    },
    doCancel() {
      this.data = [];
    },
    alertAdd() {
      this.salesman.show = true;
    },
    submit() {
      axios.post("salesman", this.formItem).then(response => {
        let res = response.data;
        if (res.code === 200) {
          this.$Message.success(res.msg);
        } else {
          if (res.code === 403) {
            this.$store.commit("logout", this);
            this.$router.push({
              name: "login"
            });
          } else {
            this.$Message.error(res.msg);
          }
        }
        this.getList();
      });
    }
  }
};
</script>

